<template>
	<view class="warp">
		<view class="nav"  >
			<scroll-view class="scroll-view_H " scroll-x="true"  >
				<view class=" scroll-view_box flex_row_start_center">
					<view :class="currentIndex==index ? 'scroll-view_H_item2':'scroll-view_H_item'" 
					v-for="(item,index) in primarycategorylist"
					 :key="index"> {{item.labelname}}</view>
				</view>
			</scroll-view>
		</view>
		<view  :style="{ 'margin-top': 'calc(' + statusBarHeight + ' + 50rpx)' }">
			<!-- 专家团 -->
			<view class="expert_list">
				<view class="expert_list_item flex_row_start_center" v-for="(item,index) in primarycategorylist[0].list" :key="index" >
					<image class="expert_list_item_image" :src="item.expertImage" mode="aspectFit"></image>
				    <view class="expert_list_item_right">
						<view class="expert_list_item_right_top">{{item.expertName}}</view>
						<view class="expert_list_item_right_bottom">
							<view>代表课程</view>
							<view>{{item.courseRepresentative}}</view>
						</view>
					</view>
				</view>
				<loadingState
				  v-if="
				    primarycategorylist[0].loadingState == 'first_loading' ||
				    primarycategorylist[0].list.length > 0
				  "
				  :state="primarycategorylist[0].loadingState"
				/>
			</view>
		</view>
		<view class="top_button flex_row_center_center" @click="handleTop" v-if="showBack">
			<uni-icons type="arrowup" color="#fff" size="20"></uni-icons>
		</view>
		<!-- 数据 -->
		<!-- <view class="" style="height: 200rpx;"></view> -->
		<tabBar selectedIndex = 1  ></tabBar>
	</view>
</template>

<script>
	import loadingState from "@/components/loading-state.vue";
	export default {
		components: {
			loadingState
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				currentIndex:1,
				  showBack: false,
				primarycategorylist: [
					// {
					// 	labelname: '全部',
					// 	labelId: 0,
					// 	current:1,
					// 	loadingState: 'first_loading',
					// 	list:[]
					// },
					{
						labelname: '专家团',
						labelId: 1,
						current:1,
						loadingState: 'first_loading',
						list:[]
					},
					
				],
				slabelindex: 0,
				labelindex:0,
				
			};
		},
		onLoad() {
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: "课程中心"
				})
			}, 0);
			this.getExpertList()
		},
		 onPageScroll(e){
		        this.showBack=e.scrollTop>100
		},
		onReachBottom(){
			console.log('到底了。。。。');
			this.getExpertList()
		},
		methods:{
			changeLabel(val){
				this.curLabelId=val
				this.slabellist=this.primarycategorylist[val].slabellist
			},
			getExpertList(source){
				let index = this.currentIndex;
				let navItem = this.primarycategorylist.filter(item => item.labelId == index)[0];
				if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingState === 'loading') {
					//防止重复加载
					return;
				}
				
				if (navItem.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
				let param = {};
				param.url = 'v3/study/front/expert/team/page';
				param.data = {};
				param.data.pageSize = 10;
				param.data.current = navItem.current;
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
				this.$request(param).then(response=>{
					console.log('response',response);
					if (response.state == 200) {
						navItem.list = navItem.list.concat(response.data.list);
						// console.log('navItem.balanceLis',navItem.balanceList);
						let hasMore = this.$checkPaginationHasMore({
							current:navItem.current,
							pageSize:10,
							total:response.total
						}); //是否还有数据
						if (hasMore) {
							navItem.current++;
							navItem.loadingState = 'allow_loading_more';
						} else {
							navItem.loadingState = 'no_more_data';
						}
						
					} else {
						this.$modal.msg(response.msg);
					}
				})
			},
			// 详情
			// tocourseinfo(){
			// 	uni.navigateTo({
			// 		url:"/extra/courseinfo/courseinfo"
			// 	})
			// },
		    handleTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		}
	}
</script>
<style>
	page {
			background-color: #f8f8f8;
			width: 750rpx;
		}
</style>
<style lang="scss" scoped>
	.warp{
		padding-bottom: 158rpx;
	}
   .top_button{
	   position: fixed;
	   right: 40rpx;
	   bottom: 150rpx;
	   width: 80rpx;
	   height: 80rpx;
	   border-radius: 50%;
	   background-color: #fc701e;
   }

	.slabel {
		padding-top: 4rpx;
	
		.slabel_list {
			overflow-x: scroll;
			box-sizing: border-box;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			/* padding-bottom: 25px; */
			border-bottom: 4rpx solid #e5e5e5;
			padding: 10rpx;
	
			.label_item {
				display: inline-block;
				// line-height: 74rpx;
				text-align: center;
				color: #282828;
				font-size: 26rpx;
				padding: 10rpx 25rpx;
				font-weight: 600;
				background-color: #f6f6f6;
				border-radius: 25rpx;
				margin-left: 10rpx;
	
			}
	
			.labelactive {
				color: #FFFFFF;
				background-color: #fc701e;
				border-radius: 25rpx;
			}
	
		}
	
		.slabel_list::-webkit-scrollbar {
			display: none;
	
		}
	}
	

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 88rpx;
		// background-color: 'transpanrent';
		background-color:#fff;
		z-index: 99;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		z-index: 99;
		right: 0;
		margin: 0 auto;
	}

	.scroll-view_H{
		height: 88rpx;
		width: 750rpx;
		// padding: 0 30rpx;
		.scroll-view_box{
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			
			.scroll-view_H_item{
				padding: 0 30rpx;
				color: #999999;
			}
			.scroll-view_H_item2{
				padding: 0 30rpx;
				color: #000;
			}
		}
	}
	
	.expert_list{
		
		.expert_list_item{
			padding: 20rpx 30rpx;
			margin-bottom: 18rpx;
			background-color: #fff;
			.expert_list_item_image{
				width: 258rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 18rpx;
			}
			.expert_list_item_right{
				width: 408rpx;
				padding-top: 20rpx;
				.expert_list_item_right_top{
					font-size: 32rpx;
					font-weight: bold;
				}
				.expert_list_item_right_bottom{
					font-size: 24rpx;
					margin-top: 40rpx;
					& view:last-child{
						font-size: 20rpx;
						margin-top: 8rpx;
						color: #999999;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		
	}


	
</style>
